<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
    <link rel="stylesheet" href="swiper-4.5.0/dist/css/swiper.min.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="logo-area">
    <div class="container">
        <div class="logo-box">
            <a href=""><h1>罗高扬</h1></a>
        </div>
    </div>
</div>
<nav>
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12 menu-column">
                <div class="menu-area">
                    <ul class="clearfix">
                        <li>
                            <a href="#one">作品展示</a>
                        </li>
                        <li>
                            <a href="#two">关于我</a>
                        </li>
                        <li>
                            <a href="#three">课堂实例</a>
                        </li>
                        <li>
                            <a href="#four">联系我</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
<div class="carousel">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="images/yupian1.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/tupian2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/tupiansan.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/tupiansi.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/tupianwu.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/tupianliu.jpg" alt=""></div>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next">></div>
        <div class="swiper-button-prev"><</div>
    </div>
</div>
<div class="zhi" id="one">
    <h3 class="text-center">作品展示</h3>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="card" style="width: 18rem;">
                    <img src="images/taobao.png" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">淘宝网</h5>
                        <p class="card-text"><a href="">熟练的运用了HTML（H5）、CSS（C3）、JavaScript和bootstrap、swiper主流框架等，并且运用了json进行数据交换，同时兼容手机端的各种型号。 </a></p>
                        <a href="http://lgy643.gitee.io/imitate_taobao/" class="btn" target="view_window" >阅读更多</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card" style="width: 18rem;">
                    <img src="images/hengwang.png" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">恒望科技</h5>
                        <p class="card-text"><a href="">熟练的运用了HTML（H5）、CSS（C3）、JavaScript和bootstrap框架等，同时兼容手机端的各种型号。</a></p>
                        <a href="http://lgy643.gitee.io/hengwang_website/" class="btn" target="view_window">阅读更多</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card" style="width: 18rem;">
                    <img src="images/homeye.png" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Home</h5>
                        <p class="card-text"><a href="">熟练的运用了HTML（H5）、CSS（C3）、JavaScript和bootstrap框架等，同时兼容手机端的各种型号。</a></p>
                        <a href="http://lgy643.gitee.io/home_pages/" class="btn" target="view_window">阅读更多</a>
                    </div>
                </div>
            </div>
            <!--<div class="col-md-4">
                <div class="card" style="width: 18rem;">
                    <img src="images/fanyi.png" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">中英互译</h5>
                        <p class="card-text"><a href="">熟练的运用了HTML（H5）、CSS（C3）、JavaScript和bootstrap框架等，同时兼容手机端的各种型号。</a></p>
                        <a href="http://lgy643.gitee.io/javascript_online_translation/" class="btn" target="view_window">阅读更多</a>
                    </div>
                </div>
            </div>-->
            <div class="col-md-4">
                <div class="card" style="width: 18rem;">
                    <img src="images/huierpu.png" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">惠而浦</h5>
                        <p class="card-text"><a href="">熟练的运用了HTML（H5）、CSS（C3）、JavaScript和bootstrap、swiper等一些主流框架，并且运用了json进行数据交换，同时兼容手机端的各种型号。</a></p>
                        <a href="http://lgy643.gitee.io/erqidabian/" class="btn">阅读更多</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card" style="width: 18rem;">
                    <img src="images/yunba.png" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">云巴</h5>
                        <p class="card-text"><a href="">熟练的运用了HTML（H5）、CSS（C3）、JavaScript和bootstrap主流框架等，同时兼容手机端的各种型号。</a></p>
                        <a href="http://lgy643.gitee.io/web_site/" class="btn" target="view_window">阅读更多</a>
                    </div>
                </div>
            </div>
            <!--<div class="col-md-4">
                <div class="card" style="width: 18rem;">
                    <img src="images/tianqiwang.png" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">天气Api</h5>
                        <p class="card-text"><a href="">熟练的运用了HTML（H5）、CSS（C3）、JavaScript和Api接口，并且运用了json进行数据交换，同时兼容手机端的各种型号。</a></p>
                        <a href="http://lgy643.gitee.io/ajaxapiweather_network/" class="btn btn-primary" target="view_window">阅读更多</a>
                    </div>
                </div>
            </div>-->
            <div class="col-md-4">
                <div class="card" style="width: 18rem;">
                    <img src="images/tengxunwang.png" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">腾讯网</h5>
                        <p class="card-text"><a href="">熟练的运用了HTML（H5）、CSS（C3）、JavaScript和bootstrap主流框架等，同时兼容手机端的各种型号。</a></p>
                        <a href="http://lgy643.gitee.io/tengxunwangye/" class="btn" target="view_window">阅读更多</a>
                    </div>
                </div>
            </div>
            <!--<div class="col-md-4">
                <div class="card" style="width: 18rem;">
                    <img src="images/jingdonggouwuche.png" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">京东购物车</h5>
                        <p class="card-text"><a href="">熟练的运用了HTML（H5）、CSS（C3）、JavaScript等，同时兼容手机端的各种型号。</a></p>
                        <a href="http://lgy643.gitee.io/shopping_cart/" class="btn btn-primary" target="view_window">阅读更多</a>
                    </div>
                </div>
            </div>-->
        </div>
    </div>
</div>
<div class="about" id="two">
    <div class="container clearfix">
        <div class="row">
            <div class="col-md-9 col-sm-12 col-xs-12 content-side">
                <div class="overlay-item">
                    <img src="images/gallery.jpg" alt="">
                    <div class="content" id="three">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="flo">
                                    <div class="inner-box">
                                        <div class="image-box">
                                            <figure class="image"><img src="images/duitang.png" alt=""></figure>
                                            <div class="overlay-box">
                                                <div class="overlay-inner">
                                                    <div class="content">
                                                        <a href="http://lgy643.gitee.io/duitangwangye/" target="view_window"><i class="fa fa-link"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="meta-text">
                                        <p>熟练的运用了HTML（H5）、CSS（C3）、JavaScript和bootstrap、swiper等主流框架。</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="flo">
                                    <div class="inner-box">
                                        <div class="image-box">
                                            <figure class="image"><img src="images/Themes.png" alt=""></figure>
                                            <div class="overlay-box">
                                                <div class="overlay-inner">
                                                    <div class="content">
                                                        <a href="http://lgy643.gitee.io/themes_website/" target="view_window"><i class="fa fa-link"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="meta-text">
                                        <p>熟练的运用了HTML（H5）、CSS（C3）、JavaScript和bootstrap主流框架等，同时兼容手机端的各种型号。</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="flo">
                                    <div class="inner-box">
                                        <div class="image-box">
                                            <figure class="image"><img src="images/漫威.png" alt=""></figure>
                                            <div class="overlay-box">
                                                <div class="overlay-inner">
                                                    <div class="content">
                                                        <a href="http://lgy643.gitee.io/manway_bootstrap_page_exercise/" target="view_window"><i class="fa fa-link"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="meta-text">
                                        <p>熟练的运用了HTML（H5）、CSS（C3）、JavaScript和bootstrap主流框架等，同时兼容手机端的各种型号。</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="flo">
                                    <div class="inner-box">
                                        <div class="image-box">
                                            <figure class="image"><img src="images/repute网站.png" alt=""></figure>
                                            <div class="overlay-box">
                                                <div class="overlay-inner">
                                                    <div class="content">
                                                        <a href="http://lgy643.gitee.io/repute_website/" target="view_window"><i class="fa fa-link"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="meta-text">
                                        <p>熟练的运用了HTML（H5）、CSS（C3）、JavaScript和bootstrap主流框架等，同时兼容手机端的各种型号。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-12 col-xs-12 content-side">
                <div class="sidebar-content">
                    <div class="sidebar-title">ABOUT ME</div>
                    <div class="img-box">
                        <a href="">
                            <img src="images/touxiang.jpg" alt="">
                        </a>
                    </div>

                    <div class="contact-adress">
                        <div class="name">
                            <a href="">罗高扬</a>
                        </div>
                        <h3 class="h3">Browny Star</h3>
                        <div class="contact-add-info">
                            <div class="single-contact-add-info">
                                <h3>Phone</h3>
                                <p>18131038105</p>
                            </div>
                            <div class="single-contact-add-info">
                                <h3>Email</h3>
                                <p>2523156348@qq.com</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sidebar-instagram">
                    <div class="sidebar-title">
                        态度决定一切
                    </div>
                    <ul class="clearfix">
                        <li>
                            <a href="">
                                <img src="images/cy1.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="images/cy2.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="images/cy3.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="images/cy4.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="images/cy5.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="images/cy6.jpg" alt="">
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="text">
                    <p><i class="fa fa-star-o"></i><a href="#">给你一万个承诺，不如给你一个行动</a></p>
                    <p><i class="fa fa-star-o"></i><a href="#">接受失败，但永不选择放弃</a></p>
                    <p><i class="fa fa-star-o"></i><a href="#">闪电从不打在相同的地方,人不该被相同的方式伤害两次</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="instagram-section centred" id ="four">
    <div class="container">
        <div class="instagram-title">
            <h2>联系我</h2>
        </div>
        <ul class="instagram-img-list clearfix">
           <li>
               <a href="">
                   <img src="images/f1.jpg" alt="">
               </a>
           </li>
           <li>
               <a href="">
                   <img src="images/f3.jpg" alt="">
               </a>
           </li>
           <li>
               <a href="">
                   <img src="images/f4.jpg" alt="">
               </a>
           </li>
           <li>
               <a href="">
                   <img src="images/f5.jpg" alt="">
               </a>
           </li>
        </ul>
        <div class="row text-center">
            <div class="col-md-4">
                <div class="fen clearfix">
                    <div class="rotated-icon">
                        <div class="sqaure-nebir"></div>
                        <i class="fa fa-map-marker yi"></i>
                    </div>
                </div>
                <p>
                    Address: 河北省邯郸市
                </p>
            </div>
            <div class="col-md-4">
                <div class="fen clearfix">
                    <div class="rotated-icon">
                        <div class="sqaure-nebir"></div>
                        <i class="fa fa-mobile er"></i>
                    </div>
                </div>
                <p>
                    Phone: 181-3103-8105
                </p>
            </div>
            <div class="col-md-4">
                <div class="fen clearfix">
                    <div class="rotated-icon">
                        <div class="sqaure-nebir"></div>
                        <i class="fa fa-envelope-o"></i>
                    </div>
                </div>
                <p>
                    Email: 2523156348@qq.com
                </p>
            </div>
        </div>
    </div>
</div>
<div class="scroll-to-top scroll-to-target" id="fh">
    <span class="icon fa fa-angle-up"></span>
</div>








<script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--<script src="js/axios.min.js"></script>
<script src="js/vue.min.js"></script>-->
<script src="js/script.js"></script>
</body>
</html>